<template>
	<view>
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click"
			@open="open" :options="options">
			<view class="w94" style="border-bottom: 2rpx solid #eee;padding:20rpx 0rpx;" @click="to('/pages/user/address/edit')">
				<view>广州白云</view>
				<view class="flex-between" style="width:100%;padding:20rpx 0rpx;">
					<label style="font-size: 30rpx;font-weight: bold;">越秀区水映路119号星光映景16楼1603室</label>
					<u-icon name="edit-pen" size="35" color="#999"></u-icon>
				</view>
				<view>陈鹏(137****8416)</view>
			</view>
		</u-swipe-action>
		
			<view class="bottom-view" @click="onSubmit">新增地址</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list: [
						{
							id: 1,
							title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
							images: 'https://cdn.uviewui.com/uview/common/logo.png',
							show: false
						},
						{
							id: 2,
							title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
							images: 'https://cdn.uviewui.com/uview/common/logo.png',
							show: false
						},
						{
							id: 3,
							title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
							images: 'https://cdn.uviewui.com/uview/common/logo.png',
							show: false,
						}
					],
					disabled: false,
					btnWidth: 180,
					show: false,
					options: [
						{
							text: '删除',
							style: {
								backgroundColor: '#dd524d'
							}
						}
					]
				};
			},
			methods: {
				click(index, index1) {
					if(index1 == 1) {
						this.list.splice(index, 1);
						this.$u.toast(`删除了第${index}个cell`);
					} else {
						this.list[index].show = false;
						this.$u.toast(`收藏成功`);
					}
				},
				// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
				open(index) {
					// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
					// 原本为'false'，再次设置为'false'会无效
					this.list[index].show = true;
					this.list.map((val, idx) => {
						if(index != idx) this.list[idx].show = false;
					})
				},
				to(url){
					console.log('跳转',url)
					uni.navigateTo({
						url:url
					})
				}
			}
		};
</script>

<style>
	page {
		background: #fff;
	}
	
	.bottom-view {
		width: 90%;
		/* margin:0 auto; */
		left: 5%;
		background: #2e80fe;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 50rpx;
		position: fixed;
		bottom: 20rpx;
	}
</style>
